<script type="text/javascript">
var row_count = <?php echo $field_count; ?>;

function add_custom_field() {
    var field_name_value = document.getElementById('field_name').value;
    var field_tag_value = document.getElementById('field_tag').value;
    var field_argument_value = document.getElementById('field_argument').value;

    if (field_name_value == '') {
        showItem('field_name_error');
        return;
    }
    if (field_tag_value == '') {
        showItem('field_tag_error');
        return;
    }
    if (field_argument_value == '') {
        showItem('field_argument_error');
        return;
    }
    document.getElementById('field_name').value = '';
    document.getElementById('field_tag').value = '';
    document.getElementById('field_argument').value = '';
    hideItem('field_name_error');
    hideItem('field_tag_error');
    hideItem('field_argument_error');

    var table_tbody = document.getElementById('table_tbody');
    showItem('table_tbody');
    table_tbody.insertRow(row_count);

    table_tbody.rows[row_count].insertCell(0);
    table_tbody.rows[row_count].insertCell(1);
    table_tbody.rows[row_count].insertCell(2);
    table_tbody.rows[row_count].insertCell(3);
    table_tbody.rows[row_count].insertCell(4);
    table_tbody.rows[row_count].cells[0].innerHTML = '<input name="data[Customfields][field_name_' + row_count + ']" size="15" value="' + field_name_value + '" />';
    table_tbody.rows[row_count].cells[1].innerHTML = '<input name="data[Customfields][field_tag_' + row_count + ']" size="15" value="' + field_tag_value + '" />';
    table_tbody.rows[row_count].cells[2].innerHTML = '<input name="data[Customfields][field_type_' + row_count + ']" size="15" value="' + document.getElementById('field_type').value + '" />';
    table_tbody.rows[row_count].cells[3].innerHTML = '<input name="data[Customfields][field_argument_' + row_count + ']" size="15" value="' + field_argument_value + '" />';
    table_tbody.rows[row_count].cells[4].innerHTML = '<a href="#" onclick="delete_custom_field_row(' + row_count + '); return false;" > delete </a>';
    row_count += 1;
}

function delete_custom_field_row(row_id) {
    var table_tbody = document.getElementById('table_tbody');
    table_tbody.rows[row_id].style.display = 'none';
    table_tbody.rows[row_id].innerHTML = '';
}

function show_add_custom_field() {
    hideItem('custom_field_button');
    showItem('add_new_custom_field_list');
}

function hide_add_custom_field() {
    showItem('custom_field_button');
    hideItem('add_new_custom_field_list');
}

function change_argument_description(select_value) {
    var argument_description;
    switch (select_value) {
        case 'input':
            argument_description = 'Please set the input size. default is 20';
            break;
        case 'textarea':
            argument_description = 'Please set the textarea size. example:6,40 6 is cols, and 40 is rows, default is 6,40';
            break;
        case 'select':
            argument_description = 'Please set the select size. split the option by \',\'';
            break;
    }
    document.getElementById('argument_description').innerHTML = argument_description;
}

</script>
<div id="content">
<h2><?php __e($title); ?></h2>
<p></p>
<form action="" method="post" id="settings">
    <table>
      <tr>
        <th><?=__('Category name')?></th>
        <td>
            <?php echo $html->input('Categories/category_name', array('size'=>30)); ?>
         </td>
      </tr>
      <tr>
        <th><?=__('Category slug')?></th>
        <td>
            <?php echo $html->input('Categories/category_slug', array('size'=>30)); ?>
        </td>
      </tr>
      <tr>
        <th><?=__('Category parent')?></th>
        <td>
        <select name="data[Diagram][diagram_parent]" id="category_paren">
        <?php echo $diagram_select_list; ?>
        </select>
        </td>
      </tr>
      <tr>
        <th><?=__('Category description')?></th>
        <td>
          <?php echo $html->textarea('Categories/category_description', array('rows'=>6,'cols'=>40)); ?>
        </td>
      </tr>
      <tr class="finalrow">
        <th></th>
        <td><input value="<?php __e($submit_value); ?>" type="submit">
        </td>
      </tr>      <tr id="add_new_custom_field">
        <th><?=__('Custom Fields')?></th>
        <td>
<span id="custom_field_button">
          <h3><a href="#" onclick="show_add_custom_field(); return false;"><?php __e('Add a new custom field'); ?></a></h3></span>
        <table>
        <tbody id="table_tbody" <?php echo empty($fields) ? 'style="display:none"' : ''; ?>>
      <tr>
        <th><?php __e('Field name'); ?></th>
        <th><?php __e('Field tag'); ?></th>
        <th><?php __e('Field type'); ?></th>
        <th><?php __e('Field argument'); ?></th>
        <th><?php __e('Action'); ?></th>
      </tr>
<?php
if (!empty($fields) ) {
    foreach($fields as $field) {
?>
        <tr>
        <td><?php echo $field->field_name; ?></td>
        <td><?php __e('Field tag'); ?></td>
        <td><?php __e('Field type'); ?><</td>
        <td><?php __e('Field argument'); ?></td>
        <td>delete</td>
        </tr>
<?php
    }
}
?>
      </tbody>
        </table>

            <div id="add_new_custom_field_list" style="display:none">
            <table>
            <tr class="finalrow">
                <th>&nbsp;</th>
                <td>&nbsp;</td>
            </tr>
             <tr>
        <th><?php __e('Field name'); ?></th>
        <td>
            <?php echo $html->input('Fields/field_name', array('id'=>'field_name', 'size'=>30)); ?> <span id="field_name_error" class="new" style="display:none"><?php __e('Fields name can not be empty'); ?></span>
         </td>
      </tr>
      <tr>
        <th><?php __e('Field tag'); ?></th>
        <td>
            <?php echo $html->input('Fields/field_tag', array('id'=>'field_tag', 'size'=>30)); ?> <span id="field_tag_error" class="new" style="display:none"><?php __e('Fields tag can not be empty'); ?></span>
        </td>
      </tr>
      <tr>
        <th><?php __e('Field type'); ?></th>
        <td>
        <?php echo $html->select('Fields/field_type', array('input'=>'Input text', 'textarea'=>'Textarea', 'select'=>'Select'), array('id'=>'field_type','onchange'=>'change_argument_description(this.value);')); ?>
        </td>
      </tr>
      <tr>
        <th><?php __e('Field argument'); ?></th>
        <td>
        <span id="argument_description">Please set the input size. default is 20</span><br>
        <?php echo $html->input('Fields/field_argument', array('id'=>'field_argument', 'size'=>40)); ?> <span id="field_argument_error" class="new" style="display:none"><?php __e('Fields argument can not be empty'); ?></span>
        </td>
      </tr>

      <tr class="finalrow">
        <th></th>
        <td><input value="<?php __e('Add Custom Field'); ?>" onclick="add_custom_field();" type="button"> <input value="<?php __e('Cancel'); ?>" onclick="hide_add_custom_field();" type="button">
        </td>
      </tr>
    </table>
        </div>
        </td>
      </tr>
    </table>
</form>
</div>
